<template>
	<view class="container">
		<!-- tab栏 -->
		<scroll-view class="scroll-view_H b-t b-b" scroll-x>
			<block v-for="(item, index) in dateArr" :key="index">
				<div class="flex-box" @click="selectDateEvent(index, item)" :style="{ 'box-shadow': index == dateActive ? 'inset 0 -2px 0 0 ' + selectedTabColor : '' }">
					<view class="date-box">
						<text class="days" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.week }}</text>
						<text class="date" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.date }}</text>
					</view>
				</div>
			</block>
		</scroll-view>
		<!-- 时间选项 -->
		<view class="time-box" v-show="timeArr.length > 0">
			<block v-for="(item, _index) in timeArr" :key="_index">
				<view class="item">
					<view
						class="item-box"
						:class="{ 'disable': (item.is_allow == 0), 'active': (timeActive.indexOf(_index) > -1)}"

						@click="selectTimeEvent(_index, item)"
					>
						<text>{{item.times}}</text>
						<!-- <text class="all" v-if="item.disable">{{ disableText }}</text>
						<text class="all" v-if="_index == timeActive[0] && !item.disable" style="font-size: 12upx;">开始时间</text>
						<text class="all" v-if="_index == timeActive[1] && !item.disable" style="font-size: 12upx;">结束时间</text> -->
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
import { dateData, timeData, timeStamp } from './date.js';
let maxIndex;
export default {
	props: {
		consultor_id: {
			type:String,
			default:'0',
		},
		//选中的tab颜色
		selectedTabColor: {
			type: String,
			default: '#0092D5'
		},
		//选中的时间颜色
		selectedItemColor: {
			type: String,
			default: '#0094D7'
		},

		//禁用显示的文本
		disableText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			nowDate:'',//当前日期
			dateArr: [], //日期数据
			timeArr: [], //时间数据
			dateActive: 0, //选中的日期索引
			timeActive: [], //选中的时间索引
			selectDate: '', //选择的日期数据
			selectTime: [], //选择的时间
			currentTimeStamp: '',
			currentTime: '',
		};
	},
	computed: {
	    ...mapState(['userInfo']),
	},
	created() {
		//获取日期tab数据
		this.dateArr = dateData();
		let myDate = new Date(),
		M = (myDate.getMonth() + 1).toString(),
		D = myDate.getDate().toString();
		let M1 = (M.length == 2) ? M : ('0'+ M),
		D1 = (D.length == 2) ? D : ('0'+ D);
		this.nowDate = M1 + '-' + D1;
		
		//当前时间戳
		this.currentTimeStamp = Date.now();
		this.currentTime = timeStamp(this.currentTimeStamp).hour;
		
		this.selectDate = `${this.dateArr[0]['date']}`;
		this.get_time_list();
	},
	methods: {
		async get_time_list(){
			let res = await this.$lib.$http.post({
				url:this.$lib.$urlMap.timeList,
				data:{
					teacher_id: this.consultor_id,
					day: this.selectDate
				},
				needLogin:true
			})
			if(res.code == 1){
				this.timeArr = res.data.data;
				this.filterTime();
			}
		},
		filterTime(){
			if(this.selectDate == this.nowDate){
				this.timeArr.map(item => {
						let time = item.times.slice(0,5)
					if (time < this.currentTime) {
						this.$set(item,'is_allow',0)
					} 
				});
			}
		},
		selectDateEvent(index, item) {
			this.timeActive = []
			this.selectTime = []
			this.$emit('selectTime', `${this.selectDate},${this.selectTime}`);
			this.dateActive = index;
			this.selectDate = `${this.dateArr[index].date}`;
			this.get_time_list();
		},
		selectTimeEvent(index, item) {
			if (item.is_allow == 0){
				uni.showToast({
					title: '当前时间不可选',
					icon:'none',
					duration: 1000
				})
				return;
			} 
			if(this.timeActive.indexOf(index) == -1){
				this.timeActive.push(index)
				this.selectTime.push(item.id)
			}else{
				let id = item.id
				this.timeActive.splice(this.timeActive.findIndex(item => item == index), 1)
				this.selectTime.splice(this.selectTime.findIndex(item => item == id), 1)
			}
			this.$emit('selectTime', `${this.selectDate},${this.selectTime}`);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
